<template>
  <div class="regular_checks_container">
    <div class="header">
      <div class="btn_group">
        <HPlainButton @click="onShowSysUpgrade">导入</HPlainButton>
        <HPlainButton @click="onShowSysUpgrade">导出</HPlainButton>
      </div>
      <div class="search">
        <el-select v-model="value5" placeholder="请选择" filterable clearable>
          <el-option v-for="item in options" :key="item.value" :value="item.value" />
        </el-select>
        <!-- 日期范围 -->
        <date-range />
        <el-input v-model.trim="input" clearable placeholder="检索" class="keyword" />
        <h-button type="primary" @click="onShowSysUpgrade">
          <el-icon>
            <Search></Search>
          </el-icon>
          搜索
        </h-button>
      </div>
    </div>
    <div class="body">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="待受理" name="first">
          <div class="table">
            <el-table border stripe resizable :data="tableData" height="100%">
              <el-table-column
                show-overflow-tooltip
                type="index"
                :index="indexMethod"
                label="序号"
                width="50"
                fixed="left"
                :align="'center'"
              />
              <el-table-column show-overflow-tooltip prop="date" label="状态" width="150" />
              <el-table-column show-overflow-tooltip prop="date" label="维保" />
              <el-table-column show-overflow-tooltip prop="date" label="排单工单" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保公司" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保时长" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="更新时间" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="创建时间" width="200" />
            </el-table>
          </div>
          <div class="pagination">
            <Pagination :list_total="12" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="进展中" name="second">
          <div class="table">
            <el-table border stripe resizable :data="tableData" height="100%">
              <el-table-column
                show-overflow-tooltip
                type="index"
                :index="indexMethod"
                label="序号"
                width="50"
                fixed="left"
                :align="'center'"
              />
              <el-table-column show-overflow-tooltip prop="date" label="状态" width="150" />
              <el-table-column show-overflow-tooltip prop="date" label="维保" />
              <el-table-column show-overflow-tooltip prop="date" label="排单工单" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保公司" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保时长" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="更新时间" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="创建时间" width="200" />
            </el-table>
          </div>
          <div class="pagination">
            <Pagination :list_total="12" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="third">
          <div class="table">
            <el-table border stripe resizable :data="tableData" height="100%">
              <el-table-column
                show-overflow-tooltip
                type="index"
                :index="indexMethod"
                label="序号"
                width="50"
                fixed="left"
                :align="'center'"
              />
              <el-table-column show-overflow-tooltip prop="date" label="状态" width="150" />
              <el-table-column show-overflow-tooltip prop="date" label="维保" />
              <el-table-column show-overflow-tooltip prop="date" label="排单工单" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保公司" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保时长" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="更新时间" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="创建时间" width="200" />
            </el-table>
          </div>
          <div class="pagination">
            <Pagination :list_total="12" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="已作废" name="fouth">
          <div class="table">
            <el-table border stripe resizable :data="tableData" height="100%">
              <el-table-column
                show-overflow-tooltip
                type="index"
                :index="indexMethod"
                label="序号"
                width="50"
                fixed="left"
                :align="'center'"
              />
              <el-table-column show-overflow-tooltip prop="date" label="状态" width="150" />
              <el-table-column show-overflow-tooltip prop="date" label="维保" />
              <el-table-column show-overflow-tooltip prop="date" label="排单工单" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保公司" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保时长" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="更新时间" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="创建时间" width="200" />
            </el-table>
          </div>
          <div class="pagination">
            <Pagination :list_total="12" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="全部" name="fifth">
          <div class="table">
            <el-table border stripe resizable :data="tableData" height="100%">
              <el-table-column
                show-overflow-tooltip
                type="index"
                :index="indexMethod"
                label="序号"
                width="50"
                fixed="left"
                :align="'center'"
              />
              <el-table-column show-overflow-tooltip prop="date" label="状态" width="150" />
              <el-table-column show-overflow-tooltip prop="date" label="维保" />
              <el-table-column show-overflow-tooltip prop="date" label="排单工单" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保公司" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="维保时长" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="更新时间" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="创建时间" width="200" />
            </el-table>
          </div>
          <div class="pagination">
            <Pagination :list_total="12" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'
  import DateRange from '@/components/DateRange.vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.regularInspection.maintenanceList,
  })

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  const onShowSysUpgrade = () => {
    ElMessage({
      type: 'success',
      message: '正在升级维护中，敬请期待...',
      duration: 5000,
      showClose: true,
      plain: true,
    })
  }

  const input = ref('')
  const activeName = ref('first')
  const value5 = ref('')
  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]
  const shortcuts = [
    {
      text: '上周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '上个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '上 3 个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  const tableData = [
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  // 日期选择事件
  const onDatePicketChange = () => {
    const endTimeStamp = new Date(endDate.value).getTime()
    const startTimeStamp = new Date(startDate.value).getTime()
    if (startTimeStamp > endTimeStamp) {
      ElMessage({
        type: 'error',
        message: '结束日期不能小于开始日期',
        duration: 5000,
        showClose: true,
        plain: true,
      })
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
